<template>
  <div class="my-orders">
    <h2>我的订单</h2>
    
    <div class="order-list">
      <div class="order-item" v-for="order in orders" :key="order.orderId">
        <div class="order-header">
          <div class="order-number">订单号：{{ order.orderNumber }}</div>
          <div class="order-time">{{ formatTime(order.createTime) }}</div>
          <div class="order-amount">¥{{ order.amount.toFixed(2) }}</div>
        </div>
        
        <div class="order-products">
          <div class="product-item" v-for="(product, index) in order.orderProductItemVo" :key="index">
            <img :src="product.img" alt="商品图片" class="product-img">
            <div class="product-info">
              <div class="product-name">{{ product.name }}</div>
              <div class="product-price">总金额：¥{{ product.price.toFixed(2) }} × {{ product.number }}</div>
            </div>
          </div>
        </div>
        
        <div class="order-footer">
          <button 
            v-if="order.orderStatus === 0" 
            class="pay-btn"
            @click="goToPay(order.orderId)"
          >
            去支付
          </button>
          <button 
            v-else 
            class="paid-btn"
            @click="showPaidMessage"
          >
            已支付
          </button>
        </div>
      </div>
    </div>
    
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getMyOrdersPaged } from '@/api/order'

const router = useRouter()
const orders = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(5)

const totalPages = computed(() => {
  return Math.ceil(total.value / pageSize.value)
})

// 格式化时间
const formatTime = (timeStr) => {
  if (!timeStr) return ''
  const [datePart, timePart] = timeStr.split('T')
  const [year, month, day] = datePart.split('-')
  const [hour, minute] = timePart.split(':')
  return `${year}年${month}月${day}日 ${hour}:${minute}`
}

// 获取订单列表
const getOrders = async () => {
  try {
    const response = await getMyOrdersPaged(currentPage.value, pageSize.value)
    if (response.code === 200 && response.data) {
      orders.value = response.data.ordersPageVo
      total.value = response.data.total
    }
  } catch (error) {
    console.error('获取订单列表失败:', error)
  }
}

// 跳转到支付页面
const goToPay = (orderId) => {
  router.push({
    path: '/pay',
    query: {
      orderId: orderId
    }
  })
}

// 显示已支付提示
const showPaidMessage = () => {
  alert('该订单已支付，请勿重复支付')
}

// 上一页
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    getOrders()
  }
}

// 下一页
const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
    getOrders()
  }
}

onMounted(() => {
  getOrders()
})
</script>

<style scoped>
.my-orders {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  margin-bottom: 20px;
  text-align: center;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.order-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}

.order-header {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #e0e0e0;
}

.order-number {
  font-weight: bold;
}

.order-amount {
  color: #f23030;
  font-weight: bold;
}

.order-products {
  padding: 15px;
}

.product-item {
  display: flex;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.product-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.product-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 15px;
}

.product-info {
  flex: 1;
}

.product-name {
  margin-bottom: 5px;
  font-weight: bold;
}

.order-footer {
  display: flex;
  justify-content: flex-end;
  padding: 15px;
  border-top: 1px solid #e0e0e0;
}

.pay-btn {
  background-color: #f23030;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.paid-btn {
  background-color: #999;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  gap: 10px;
}

.pagination button {
  padding: 5px 10px;
  border: 1px solid #ddd;
  background-color: #fff;
  cursor: pointer;
  border-radius: 4px;
}

.pagination button:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}
</style>